import { createApp, Directive } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

// router hooks
import './routerHooks'

// i18n
import { i18n } from '@/plugin/i18n'

// antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';

// style
import '@/styles/index'

// plugin
import eventHub from './plugin/emitter'

// directive
import * as directives from '@/directive'
// filter
import * as filters from '@/filters'
// utils
import utils from '@/utils/utils'
// global components
import * as globalComponents from '@/components/Index'

if (process.env.NODE_ENV === 'development') {
  // require('../mock/index')
}

const app = createApp(App);
// global properties
app.config.globalProperties.$eventBus = eventHub;
app.config.globalProperties.$filters = filters; // instead filter
// config module
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $eventBus: Record<any, any>;
    $message: Record<any, any>;
    $modal: Record<any, any>;
    $filters: Record<any, any>;
    $utils: Record<any, any>;
  }
}
//

// global directives
Object.keys(directives).forEach((key: string) => {
  app.directive(key, (directives as { [key: string]: Directive })[key])
})
//

// global components
Object.keys(globalComponents).forEach((key: string) => {
  const component = (globalComponents as { [key: string]: any })[key];
  app.component(component.name, component)
})

app
  .use(store)
  .use(router)
  .use(Antd)
  .use(i18n)
  .use(utils, {
    version: '1.0'
  })
  .mount('#app')
